<template>
    <div class="container">
        <page-main>
            <el-form :model="formData" :rules="rules" ref="addForm">
                <el-row>
                    <el-col :span="23" :offset="1">
                        <h2>单位基本情况</h2>
                    </el-col>
                    <el-col :span="20" :offset="1">
                        <el-button @click="$router.push('/xfSupervise/orgTree')">消防安全管理架构</el-button>
                        <el-button @click="$router.push('/xfSupervise/microFireProtection')">微型消防站</el-button>
                        <el-button @click="test">三自主两公开一承诺</el-button>
                        <el-button @click="test2">应急预案</el-button>
                    </el-col>
                    <el-col :span="23" :offset="1"
                        style="border-bottom: 1px solid #bbb; height: 1px; margin-bottom: 10px; margin-top: 10px"></el-col>
                    <el-col :span="20" :offset="1">
                        <h2>单位信息</h2>
                    </el-col>
                    <!-- 基本信息:单位名称,地址,网格,联系人员/ 所在建筑信息:面积/安全管理信息: -->
                    <!-- <el-col :span="5" :offset="1">
            <el-form-item label="单位简称" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
          </el-col> -->
                    <el-col :span="6" :offset="1">
                        <el-form-item label="单位名称" prop="full_name">
                            <el-input v-model="formData.full_name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="户籍化名称" prop="supervise_name">
                            <el-select v-model="formData.supervise_name" filterable remote reserve-keyword
                                placeholder="请输入单位关键词" :remote-method="remoteMethod" :loading="loading"
                                @change="selectChange">
                                <el-option v-for="item in unitList" :key="item.id" :label="item.unitBaseName"
                                    :value="item.unitCode" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :offset="1">
                        <el-form-item label="单位地址" prop="address">
                            <el-input v-model="formData.address" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" style="margin-left: 10px">
                        <el-form-item prop="longitude">
                            <div style="display: flex; align-item: center">
                                <!-- <el-button @click="getLatLng">定位</el-button> -->
                                <el-button @click="locationBtn">定位</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <!-- 区域 -->
                        <el-form-item label="行政地区" prop="region_id">
                            <el-cascader v-model="formData.region_id" :options="regionList" :props="regionProps"
                                clearable />
                            <!-- <el-input v-model="formData.region_id"></el-input> -->
                            <!-- <span>
                <span v-for="item in regionInfo.parent" :key="item.id">{{
                  item.name + ">"
                }}</span>
              </span>
              <el-cascader
                v-model="formData.region_id"
                :options="regionInfo.list"
                placeholder="请选择"
                :props="{
                  label: 'name',
                  value: 'id',
                  children: 'sub_item',
                }"
                @change="regionChange"
              ></el-cascader> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="所在网格" prop="area_id">
                            <el-cascader v-model="formData.area_id" :options="gridList" @change="gridHandleChange"
                                :props="gridCascaderProps"></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="单位类型" prop="unit_type">
                            <el-select v-model="formData.unit_type" placeholder="请选择">
                                <el-option v-for="item in unitTypeList" :key="item" :label="item.value" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="监管等级" prop="watch_level">
                            <el-select v-model="formData.watch_level" placeholder="请选择">
                                <el-option v-for="item in watchTypeList" :key="item" :label="item.value"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="消防管辖单位" prop="jurisdiction">
                            <el-input v-model="formData.jurisdiction"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="消防安全管理人姓名" prop="contact_name">
                            <el-input style="width: 60%; margin-right: 1%" v-model="formData.contact_name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="消防安全管理人电话" prop="phone">
                            <el-input style="width: 60%; margin-right: 1%" v-model="formData.phone"
                                oninput="value=value.replace(/[^\d]/g,'')" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="组织机构代码" prop="unit_code">
                            <el-input v-model="formData.unit_code"
                                oninput="value=value.replace(/[^0-9a-zA-Z]/g,'')"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="固定资产（万元）">
                            <el-input v-model="formData.fixed_assets" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6" :offset="1">
                        <el-form-item label="职工总人数" prop="employees">
                            <el-input v-model="formData.employees" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6" :offset="1">
                        <el-form-item label="经济所有制">
                            <el-cascader v-model="formData.ownership" :options="ownerShipList" :props="cascaderProps"
                                @change="ownerChange"></el-cascader>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6" :offset="1">
            <el-form-item label="所属行政机构">
              <el-input disabled v-model="formData.organ_id"></el-input>
              <el-button size="mini" type="primary">修改</el-button>
            </el-form-item>
          </el-col> -->
                    <el-col :span="6" :offset="1">
                        <el-form-item label="成立时间">
                            <el-date-picker v-model="formData.setup_time" type="date" placeholder="选择日期"> </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <!-- <el-col :span="12" :offset="1">
                <el-form-item label="联系人员：姓名/联系电话" prop="phone">
                    <div style="display: flex; align-item: center;">
                        <el-input
                        style="width: 60%; margin-right: 1%;"
                        v-model="formData.contact_name"
                        ></el-input>
                        <el-input
                        style="width: 60%; margin-right: 1%;"
                        v-model="formData.phone"
                        oninput="value=value.replace(/[^\d]/g,'')"
                        :maxlength="11"
                        ></el-input>
                    </div>
                </el-form-item>
            </el-col> -->
                    <el-col :span="23" :offset="1">
                        <el-form-item label="单位简介（300字以内）">
                            <el-input type="textarea" size="medium" v-model="formData.describe" maxlength="300"></el-input>
                        </el-form-item>
                    </el-col>
                    <!--安全信息-->
                    <el-col :span="23" :offset="1"
                        style="border-bottom: 1px solid #bbb; height: 1px; margin-bottom: 10px"></el-col>
                    <!-- 单位安全 -->
                    <el-col :span="23" :offset="1">
                        <h2 class="test">自主公开信息</h2>
                    </el-col>
                    <!-- 门前三包 -->
                    <!-- <el-col :span="5" :offset="1">
            <el-form-item label="火灾风险告知书" prop="door_front_file">
              <el-upload :action="upDataUrl + '/unit/upload/upload'" :on-change="doorChange" :file-list="doorFileList"
                :headers="upLoadImgHeader" :data="upLoadImgData" :limit="1" :on-exceed="onExceed"
                :on-success="doorFileUpSuccess" list-type="picture-card" class="door" :before-remove="doorRemove"
                accept=".jpg,.png,.jpeg" :on-preview="handlePictureCardPreview">
                <i class="el-icon-plus"></i>
              </el-upload>




            </el-form-item>
          </el-col> -->
                    <!-- 安全承诺书 -->
                    <el-col :span="5" :offset="1">
                        <el-form-item label="消防安全承诺书" prop="safe_promise_file">
                            <!-- list-type="picture-card" accept=".jpg,.png,.jpeg" -->
                            <el-upload :action="upDataUrl + '/unit/upload/upload'"   :file-list="safeFileList"
                                :headers="upLoadImgHeader" :data="upLoadImgData" :limit="1" :on-exceed="onExceed"
                                :on-success="safeFileUpSuccess" class="safe" list-type="picture-card" accept=".jpg,.png,.jpeg">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <el-button size="small" type="" v-if="formData.safe_promise_file.includes('.pdf')"
                                    @click.stop.prevent="showPDF(formData.safe_promise_file)">预览pdf</el-button>
                            </el-upload>
                        </el-form-item>


                    </el-col>
                    <!-- 三自主两公开一承诺 -->
                    <el-col :span="5" :offset="1">
                        <el-form-item label="自主评估风险书" prop="org_promise_file">
                            <el-upload :action="upDataUrl + '/unit/upload/upload'" :file-list="orgFileList"
                                :headers="upLoadImgHeader" :data="upLoadImgData" :limit="1" :on-exceed="onExceed"
                                :on-success="orgFileUpSuccess" class="org" list-type="picture-card" accept=".jpg,.png,.jpeg">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <el-button size="small" type="" v-if="formData.org_promise_file.includes('.pdf')"
                                    @click.stop.prevent="showPDF(formData.org_promise_file)">预览pdf</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <!-- 疏散路线图 -->
                    <el-col :span="5" :offset="1">
                        <el-form-item label="疏散路线图" prop="escape_map">
                            <el-upload :action="upDataUrl + '/unit/upload/upload'" :file-list="imgFileList"
                                :headers="upLoadImgHeader" :data="upLoadImgData" :limit="1" :on-exceed="onExceed"
                                :on-success="imgUpSuccess" class="img" list-type="picture-card" accept=".jpg,.png,.jpeg">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <el-button size="small" type="" v-if="formData.escape_map.includes('.pdf')"
                                    @click.stop.prevent="showPDF(formData.escape_map)">预览pdf</el-button>
                            </el-upload>

                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="安全责任人姓名" prop="safety_name">
                            <el-input v-model="formData.safety_name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="5">
                        <el-form-item label="安全责任人电话" prop="safety_mobile">
                            <el-input v-model="formData.safety_mobile" oninput="value=value.replace(/[^\d]/g,'')"
                                :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="安全管理员姓名" prop="scseca_name"><el-input
                                v-model="formData.scseca_name"></el-input></el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="5">
                        <el-form-item label="安全管理员电话" prop="scseca_mobile"><el-input v-model="formData.scseca_mobile"
                                oninput="value=value.replace(/[^\d]/g,'')" :maxlength="11"></el-input></el-form-item>
                    </el-col>
                    <!-- <el-col :span="6" :offset="1">
            <el-form-item label="户籍化ID">
              <el-input v-model="formData.household_ID" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
          </el-col> -->

                    <!-- <el-col :span="4" :offset="1">
            <el-form-item label="联系人员">
              <el-input v-model="formData.account"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-form-item label="联系方式">
              <el-input v-model="formData.phone" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
          </el-col> -->
                    <!-- <el-col :span="4" :offset="1">
            <el-form-item label="职工总人数">
              <el-input v-model="formData.employees"></el-input>
            </el-form-item>
          </el-col> -->

                    <!-- <el-col :span="6" :offset="1">
            <el-form-item label="监管类型">
              <el-select v-model="formData.watch_type" placeholder="请选择">
                <el-option
                  v-for="item in unitTypeList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->

                    <!-- <el-col :span="6" :offset="1">
            <el-form-item label="维保单位">
              <el-select v-model="formData.maintain_unit" placeholder="请选择">
                <el-option
                  v-for="item in maintainUnitList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->

                    <!-- <el-col :span="4" :offset="1">
            <el-form-item label="电子邮件">
              <el-input v-model="formData.email"></el-input>
            </el-form-item>
          </el-col> -->
                    <!-- <el-col :span="4" :offset="1">
            <el-form-item label="传真">
              <el-input v-model="formData.fax" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
          </el-col> -->
                    <el-col :span="23" :offset="1"
                        style="border-bottom: 1px solid #bbb; height: 1px; margin-bottom: 10px"></el-col>
                    <!-- 建筑信息 -->
                    <el-col :span="23" :offset="1">
                        <h2>建筑信息</h2>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <el-form-item label="单位图片">
                            <el-upload :action="upDataUrl + '/unit/upload/upload'" list-type="picture-card"
                                :file-list="headFileList" :headers="upLoadImgHeader" :data="upLoadImgData"
                                :on-success="headImgUpSuccess" class="unit" accept=".jpg,.png,.jpeg"
                                :on-preview="handlePictureCardPreview">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <el-form-item label="固定面积（m²）">
                            <el-input v-model="formData.covered_area" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <el-form-item label="建筑面积（m²）">
                            <el-input v-model="formData.built_area" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="23" :offset="1"
                        style="border-bottom: 1px solid #bbb; height: 1px; margin-bottom: 10px"></el-col>
                    <el-col :span="23" :offset="1">
                        <h2 class="test2">应急预案</h2>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <el-form-item label="应急预案" prop="emergency_file">
                            <el-upload :action="upDataUrl + '/unit/upload/upload'" :file-list="headFileList2"
                                :headers="upLoadImgHeader" :data="upLoadImgData" :on-success="headImgUpSuccess2"
                                class="unit2">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <el-button size="small" type="" v-if="formData.emergency_file.includes('.pdf')"
                                    @click.stop.prevent="showPDF(formData.escape_map)">预览pdf</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!-- 地图 -->
            <div class="mapBox" v-show="mapIsShow">
                <div class="search">
                    <span type="primary" style="line-height: 40px">搜索</span>
                    <el-input placeholder="请输入内容" v-model="searchInput" @keyup.enter="inputChange">
                        <template #prefix>
                            <i class="el-input__icon el-icon-search"></i>
                        </template>
                    </el-input>
                </div>
                <div id="container"></div>
                <div style="text-align: center; background-color: #fff; padding: 20px 0">
                    {{ address }}
                </div>
                <div class="btnBox">
                    <el-button type="primary" class="btn" @click="suerMap">确定</el-button>
                    <el-button @click="cancelMap">取消</el-button>
                </div>
            </div>
            <!-- 图片放大 -->
            <el-dialog v-model="dialogVisible">
                <img style="width: 100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
            <el-affix position="bottom" target=".container">
                <div class="blockColor">
                    <div style="margin-top: 10px">
                        <el-button type="primary" @click="submitForm" style="margin-left: 50px">保存</el-button>
                    </div>
                </div>
            </el-affix>
        </page-main>
        <PdfPreview ref="pdfPreviewRef" />
    </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import PdfPreview from '@/components/PdfPreview/index.vue'
export default {
    data() {
        return {
            selectUnitLoading: false,
            loading: false,
            unitSearchId: '',
            address: '',
            gridList: [],
            searchInput: '',
            mapIsShow: false,
            // 街道数据
            streeValue: '',
            // 网格
            gridValue: '',
            upLoadImgData: {
                type: 'file'
            },
            upDataUrl: import.meta.env.VITE_APP_API_BASEURL,
            cascaderProps: {
                value: 'id',
                label: 'name',
                children: 'child'
            },
            gridCascaderProps: {
                label: 'name',
                value: 'id',
                children: 'sub_item',
                checkStrictly: true,
                leaf: 'children'
            },
            value: '',
            editId: '',
            dialogImageUrl: '',
            dialogVisible: false,
            headFileList: [],
            headFileList2: [],
            rules: {
                jurisdiction: [{ required: true, message: '请输入', trigger: 'blur' }],
                region_id: [{ required: true, message: '请选择', trigger: 'blur' }],
                // name: [{ required: true, message: "请输入", trigger: "blur" }],
                full_name: [{ required: true, message: '请输入', trigger: 'blur' }],
                address: [{ required: true, message: '请输入', trigger: 'blur' }],
                longitude: [{ required: true, message: '请输入', trigger: 'blur' }],
                latitude: [{ required: true, message: '请输入', trigger: 'blur' }],
                watch_level: [{ required: true, message: '请输入', trigger: 'blur' }],
                unit_type: [{ required: true, message: '请选择', trigger: 'blur' }],
                // area_id: [{ required: true, message: "请选择", trigger: "blur" }],
                // escape_map: [{ required: true, message: "请上传", trigger: "blur" }],
                // safe_promise_file: [
                //   { required: true, message: "请上传", trigger: "blur" },
                // ],
                // org_promise_file: [
                //   { required: true, message: "请上传", trigger: "blur" },
                // ],
                // door_front_file: [
                //   { required: true, message: "请上传", trigger: "blur" },
                // ],
                // safety_name: [{ required: true, message: "请输入", trigger: "blur" }],
                contact_name: [
                    {
                        required: true,
                        message: '请输入联系人姓名',
                        trigger: 'blur'
                    }
                ],
                phone: [
                    {
                        min: 11,
                        max: 11,
                        trigger: 'blur',
                        message: '请输入正确的手机号'
                    },
                    {
                        required: true,
                        pattern:
                            /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
                    } //正则
                ],

                safety_officer: [{ required: true, message: '请输入', trigger: 'blur' }],
                // unit_code: [{ required: true, message: "请输入", trigger: "blur" }],
                safety_officer_mobile: [
                    { required: true, message: '请输入', trigger: 'blur' },
                    {
                        min: 11,
                        max: 11,
                        trigger: 'blur',
                        message: '请输入正确的手机号'
                    },
                    {
                        required: true,
                        pattern:
                            /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
                    } //正则
                ]
            },
            formData: {
                jurisdiction: '',
                region_id: '',
                name: '',
                full_name: '',
                address: '',
                add_time: '',
                longitude: '',
                emergency_file: '',
                latitude: '',
                // household_ID: "",
                watch_level: '',
                unit_code: '',
                // organ_id: "",
                contact_name: '',
                phone: '',
                employees: '',
                ownership: '',
                watch_type: '',
                maintain_unit: '',
                industry_tag: '',
                setup_time: '',
                fixed_assets: '',
                covered_area: '',
                built_area: '',
                images: '',
                describe: '',
                is_stop: 1,
                area_id: '',
                unit_type: '',
                safe_promise_file: '',
                org_promise_file: '',
                door_front_file: '',
                escape_map: '',
                safety_name: '',
                safety_mobile: '',
                scseca_name: '',
                scseca_mobile: '',
                safety_officer: '',
                safety_officer_mobile: '',
                org_code: '' //单位编号
            },
            ownerShipList: [],
            unitTypeList: [],
            unitList: [],
            //   maintainUnitList: [],
            watchTypeList: [],

            imgFileList: [],
            doorFileList: [],
            safeFileList: [],
            orgFileList: [],
            // 地图实例
            map: null,
            regionInfo: '',
            regionList: [],
            regionProps: {
                checkStrictly: true,
                value: 'id',
                label: 'name',
                children: 'sub_item'
            }
        }
    },
    watch: {
        mapIsShow(newData) {
            if (!newData) {
                this.searchInput = ''
            }
        }
    },
    components: { PdfPreview },
    computed: {
        upLoadImgHeader() {
            return {
                'A-Token': this.$store.state.user.a_token,
                'U-Token': this.$store.state.user.u_token
            }
        }
    },
    created() {
        this.getRegionData()

        this.$api.post('/unit/YjUnit/Setting').then((res) => {
            //   this.maintainUnitList = res.data.wb_unit;
            this.ownerShipList = res.data.ownership
            this.unitTypeList = res.data.unit_type
            this.watchTypeList = res.data.watch_level
        })
        this.$api.post('/unit/YjUnit/Show', { id: this.$route.params.id }).then((res) => {
            this.formData = res.data
            this.getMap(this)
            this.formData.setup_time = this.formData.setup_time * 1000
            if (this.formData.watch_type == '0') {
                this.formData.watch_type = ''
            }
            if (this.formData.ownership == '0') {
                this.formData.ownership = ''
            } else {
                this.formData.ownership = this.formData.ownership.split(',')
                this.formData.ownership[0] = parseInt(this.formData.ownership[0])
            }
            if (res.data.escape_map) {
                this.imgFileList = [{ name: res.data.escape_map, url: this.upDataUrl + res.data.escape_map }]
            }
            if (res.data.safe_promise_file) {
                this.safeFileList = [{ name: res.data.safe_promise_file, url: this.upDataUrl + res.data.safe_promise_file }]

            }
            if (res.data.org_promise_file) {
                this.orgFileList = [{ name: res.data.org_promise_file, url: this.upDataUrl + res.data.org_promise_file }]
            }
            if (res.data.emergency_file) {
                this.headFileList2 = [{ name: res.data.emergency_file, url: this.upDataUrl + res.data.emergency_file }]
            }
            if (res.data.door_front_file) {
                this.doorFileList = [{ url: this.upDataUrl + res.data.door_front_file }]
            }

            if (res.data.images) {
                this.headFileList = [{ url: this.upDataUrl + res.data.images }]
            }

            if (this.formData.phone == 0) {
                this.formData.phone = ''
            }
        })
    },
    beforeUnmount() {
        this.map.destroy()
    },
    methods: {
        selectChange(val) {
            // this.formData.unit_code = val
            console.log(val)
        },
        test() {
            document.querySelector('.test').scrollIntoView()
        },
        test2() {
            document.querySelector('.test2').scrollIntoView()
        },
        showPDF(url) {
            this.$refs.pdfPreviewRef.open(url)
        },
        // 获取区域数据
        getRegionData() {
            this.$api.post('/merchant/unitInformation/tree', { region_id: 620100 }).then((res) => {
                this.delSubItem(res.data.list)
                this.regionList = res.data.list
            })
        },
        // 去除空的sub_item
        delSubItem(data) {
            data.forEach((item) => {
                if (!item.sub_item.length) return delete item.sub_item
                this.delSubItem(item.sub_item)
            })
        },
        unitCheckEvent(e) {
            this.unitSearchId = e
        },
        remoteMethod(query) {
            if (query !== '') {
                this.selectUnitLoading = true
                this.$api.get(`/v2/unit/baseList?unitName=${query}`).then((res) => {
                    console.log(res)
                    this.selectUnitLoading = false
                    this.unitList = res.data
                })
            } else {
                this.unitList = []
            }
        },
        getRegionInfo() {
            this.$api.post('/unit/Region/tree').then((res) => {
                this.regionInfo = res.data
            })
        },
        //   图片放大
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        //   点击定位
        locationBtn() {
            this.mapIsShow = true
            let data = JSON.parse(JSON.stringify(this.formData))
            this.jingwei = {
                longitude: data.longitude,
                latitude: data.latitude
            }
        },
        inputChange() {
            this.getMap(this, this.searchInput)
        },
        cancelMap() {
            this.formData.longitude = this.jingwei.longitude
            this.formData.latitude = this.jingwei.latitude
            this.mapIsShow = false
        },
        // 地图确定按钮
        suerMap() {
            this.mapIsShow = false
            this.formData.address = this.address
        },
        // 地图
        getMap(_this, search) {
            // if (search === '') {
            //     search = '城关区'
            // }
            // var map = null,
            let marker = null
            //  , _lngLat = {};
            function genMap(lng, lat, isSuc = 1) {
                //生成地图实例和标记
                _this.map = new AMap.Map('container', {
                    resizeEnable: true, // 允许缩放
                    center: isSuc && [lng, lat], // 设置地图的中心点
                    zoom: 15 // 设置地图的缩放级别，0 - 20
                })
                let doMark = (lng, lat) => {
                    // 设置标记
                    _this.map && marker && _this.map.remove(marker)
                    marker = new AMap.Marker({
                        map: _this.map,
                        position: new AMap.LngLat(lng, lat) // 经纬度
                    })
                }
                _this.formData.longitude = lng
                _this.formData.latitude = lat
                _this.map.on('click', (res) => {
                    var { lnglat } = res,
                        lng = lnglat.lng,
                        lat = lnglat.lat
                    // _this._lngLat.lng = lng;
                    // _this._lngLat.lat = lat;
                    _this.formData.longitude = lng
                    _this.formData.latitude = lat
                    doMark(lng, lat)
                    AMap.plugin('AMap.Geocoder', function () {
                        var geocoder = new AMap.Geocoder()
                        geocoder.getAddress([lng, lat], function (status, result) {
                            if (status == 'complete' && result.info == 'OK') {
                                // result为对应的地理位置详细信息
                                _this.address = result.regeocode.formattedAddress
                            }
                        })
                    })
                })
                isSuc && doMark(lng, lat)
            }
            function markLocation(mapId, address) {
                AMap.plugin('AMap.Geocoder', function () {
                    var geocoder = new AMap.Geocoder()
                    geocoder.getLocation(address, function (status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            var lng = result.geocodes[0].location.lng,
                                lat = result.geocodes[0].location.lat
                            genMap(lng, lat)
                        } else {
                            //    alert('定位失败！');
                            genMap(lng, lat, 0)
                        }
                    })
                })
            }
            let lng = _this.formData.longitude
            let lat = _this.formData.latitude
            if (search) {
                markLocation('container', search)
            } else if (lng && lat) {
                genMap(lng, lat)
            } else {
                search = '攀枝花'
                markLocation('container', search)
            }
        },
        //   门前三包
        doorRemove() {
            let door = document.getElementsByClassName('door')[0]
            console.log(door)
            door.children[1].style.display = 'block'
            this.formData.door_front_file = '-'
        },
        doorChange() {
            let door = document.getElementsByClassName('door')[0]
            door.children[1].style.display = 'none'
        },
        //   安全承诺书
        safeChange() {
            let safe = document.getElementsByClassName('safe')[0]
            safe.children[1].style.display = 'none'
        },
        safeRemove() {
            let safe = document.getElementsByClassName('safe')[0]
            safe.children[1].style.display = 'block'
            this.formData.safe_promise_file = '-'
        },
        //   三自主两公开一承诺
        orgChange() {
            let org = document.getElementsByClassName('org')[0]
            org.children[1].style.display = 'none'
        },
        orgRemove() {
            let org = document.getElementsByClassName('org')[0]
            org.children[1].style.display = 'block'
            this.formData.org_promise_file = '-'
        },
        //   疏散线路图
        imgChange() {
            let img = document.getElementsByClassName('img')[0]
            img.style.display = 'none'
        },
        imgRemove() {
            let img = document.getElementsByClassName('img')[0]

            img.style.display = 'block'
            this.formData.escape_map = '-'
        },
        //   单位图片
        unitChange() {
            let unit = document.getElementsByClassName('unit')[0]
            unit.children[1].style.display = 'none'
        },
        unitChange2() {
            let unit = document.getElementsByClassName('unit2')[0]
            unit.children[1].style.display = 'none'
        },
        unitRemove() {
            let unit = document.getElementsByClassName('unit')[0]
            unit.children[1].style.display = 'block'
            this.formData.images = '-'
        },
        unitRemove2() {
            let unit = document.getElementsByClassName('unit2')[0]
            unit.children[1].style.display = 'block'
            this.formData.images = '-'
        },
        //   经济所有制
        ownerChange(e) {
            this.formData.ownership = e[e.length - 1]
        },
        // 区域下拉框发生变化
        // regionChange(top_id) {
        //     this.formData.region_id = top_id
        // },
        // 网格下拉
        // gridChange(top_id) {
        //     this.formData.area_id = top_id
        // },
        // 网格
        gridHandleChange(e) {
            this.formData.area_id = e[Number(e.length) - 1]
        },
        getLatLng() {
            this.$getLocaion(returnCitySN['cip']).then((res) => {
                let temp = res.data.location.split(',')
                this.formData.longitude = temp[0] //经度
                this.formData.latitude = temp[1] //纬度
            })
        },
        // 文件
        onExceed() {
            this.$message({
                showClose: true,
                message: '如需更改，请先删除已上传的',
                type: 'error'
            })
        },
        doorFileUpSuccess(res) {
            this.formData.door_front_file = res.data.result
        },
        safeFileUpSuccess(res) {
            this.formData.safe_promise_file = res.data.result
        },
        orgFileUpSuccess(res) {
            this.formData.org_promise_file = res.data.result
        },
        imgUpSuccess(res) {
            this.formData.escape_map = res.data.result
        },
        headImgUpSuccess(e) {
            this.formData.images = e.data.result
        },
        headImgUpSuccess2(e) {
            this.formData.emergency_file = e.data.result
            console.log(e.data.result)
        },
        submitForm() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    let data = this.formData
                    data.add_time = new Date(data.add_time).getTime() / 1000
                    data.setup_time = new Date(data.setup_time).getTime() / 1000
                    data.update_time = new Date(data.update_time).getTime() / 1000
                    this.$api.post('/unit/YjUnit/Save', data).then((res) => {
                        if (res.code != 200)
                            return this.$message({
                                showClose: true,
                                message: res.msg,
                                type: 'error'
                            })
                        this.$message({
                            showClose: true,
                            message: res.msg,
                            type: 'success'
                        })
                    })
                } else {
                    ElMessage.error('请填写完整')
                    return false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.blockColor {
    display: flex;
    justify-content: center;
    background-color: #fff;
}

.addEditHeader {
    display: flex;
    justify-content: space-between;
}

.dialogBox {
    display: flex;
    justify-content: center;
    align-items: center;

    & img {
        width: 300px;
        height: 300px;
    }
}

.mapBox {
    width: 800px;
    background-color: rgba(236, 234, 234, 0.938);
    height: 640px;
    position: fixed;
    top: 50%;
    left: 30%;
    transform: translateY(-60%);
    flex-direction: column;

    #container {
        z-index: 100;
        width: 800px;
        height: 500px;
    }

    .btnBox {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        width: 200px;
    }

    .search {
        display: flex;

        span {
            width: 100px;
            background-color: rgb(245, 244, 244);
            // line-height: 40px;
            text-align: center;
        }
    }
}

.org,
.img,
.safe {
    min-width: 200px;
}
</style>
